<template>
	
	<view class="total" >
		<view class="tabb">
			<view style="display: flex;width: 470rpx;height: 120rpx;flex-direction: row;justify-content: space-around;align-items: center;">
				<span :class="near_class_list"  @click="near_class_change()" style="margin-top: 5rpx;">附近门店</span>
				<span :class="store_class_list"  @click="store_class_change()" style="height: 110rpx;margin-bottom: 14rpx;">常去/收藏门店</span>
			</view>
			<!-- <van-search style="width: 250rpx;" placeholder="搜索" ></van-search> -->
		</view>
		
		
			<store v-show="!near" ref="store" style="margin-top: 150rpx;"></store>
		
		
		
			<near v-show="near" ref="near" style="margin-top: 200rpx;"></near>
		
		
		<view class="nav">
			<view class="item" @click="skipToShouye()">
				<image src="../../../static/首页.png" class="pic" style="margin-left: 18rpx;"></image>
				<span class="word">首页</span>
			</view>
			<view class="item" @click="skipToBuy()">
				<image src="../../../static/点单.png" class="pic"></image>
				<span class="word">点单</span>
			</view>
			<view class="item" @click="skipToMyOrder()">
				<image src="../../../static/订单.png" class="pic"></image>
				<span class="word">订单</span>
			</view>
			<view class="item" @click="skipToMine()">
				<image src="../../../static/我的.png" class="pic"></image>
				<span class="word">我的</span>
			</view>
			
		</view>
	</view>
</template>

<script>
	import store from "./store/store"
	import near from "./near/near"
	import nav from "../navv/nav.js"
	export default {
		data() {
			return {
				near_class_list:[
					"checked",
					"tab"
				],
				store_class_list:[
					
					"tab"
				],
				near:true,
				account:this.$store.getters.account
			}
		},
		components:{
			store,
			near
		},
		onShow() {
			let t=this;
			this.$refs.near.store=function(name){//收藏功能
				
				t.$refs.near.if_store[name]=!t.$refs.near.if_store[name]
				if(t.$refs.near.if_store[name]){ 
					
					uni.request({
						method:"POST",
						url:"http://localhost:3000/setStore",
						data:JSON.stringify({account:t.account,name:name}),
						dataType:"application/json",
						success(data) {
							
						}
					})
					//t.$refs.store.store_list.push(name)
					t.$refs.near.sdufe_store_image[name]="../../../../static/收藏11.png"
				}
				else{
					uni.request({
						method:"POST",
						url:"http://localhost:3000/delStore",
						data:JSON.stringify({account:t.account,name:name}),
						dataType:"application/json",
						success(data) {
							
						}
					})
					// t.$refs.store.store_list=t.$refs.store.store_list.filter((value,index,arr)=>{
					// 	if(value!=name){
					// 		return value
					// 	}
					// })
					t.$refs.near.sdufe_store_image[name]="../../../../static/收藏.png"
				}
				
			}
		},
		methods: {
			...nav,
			near_class_change(){//高亮
				this.near_class_list=["checked","tab"];
				this.store_class_list=["tab"];
				this.near=true
			},
			store_class_change(){//收藏高亮
				this.near_class_list=["tab"];
				this.store_class_list=["tab","checked"];
				this.near=false
				let t=this
				
				for(let i=t.$refs.store.store_list.length;i>0;i--){
					
					t.$refs.store.store_list.pop() 
				} 
				
				uni.request({//获取收藏信息
					data:JSON.stringify({account:t.account}),
					dataType:"application/json",
					method:"POST",
					url:"http://localhost:3000/getStore",
					success(data) {
						
						for(let i=0;i<data.data.length;i++){
							
							t.$refs.store.store_list.push(JSON.parse(data.data)[i].shop_name)
						}
						console.log(JSON.parse(data.data))
					}
				})
			},
			btn(){
				let query = uni.createSelectorQuery().in(this);
				query.select('#btn').style.cssText="background-color:black;"
			}
			
		}
	}
</script>

<style scoped>
	/* @import '/wxcomponents/vant/search/index.wxss';
	@import '/wxcomponents/vant/common/index.wxss'; */
	.total{
		background-color: #ededed;
		width: 750rpx;
		height: 1200rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
	}
	.shoppping{
		width: 710rpx;
		height: 350rpx;
		background-color: white;
		margin-top: 50rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.tab{
			display: block;
			width:162rpx;
			height: 90rpx;
			font-size: 34rpx;
			color:grey;
			text-align: center;
			padding-top: 47rpx;
			font-weight: 400;
			overflow-x: visible;
			border-bottom: 5rpx solid white;
			
			
			
		}
		.checked{
			border-bottom: 5rpx solid green;
			color: green;
		}
		.tabb{
			width: 747rpx;
			height:147rpx;
			border-width: 1rpx;
			border-color: #ededed;
			border-style: solid;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			background-color: white;
			position: fixed;
			top:0rpx
		}
.nav{
		display: flex;
		position: fixed;
		top:92%;
		background-color: white;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		width: 750rpx;
		height: 120rpx;
		border-top: 2rpx;
		border-style: solid;
		border-width: 2rpx;
		border-color: #d0d0d0;
		z-index: 99;
	}
	.word{
		font-size: 25rpx;
	}
	.item{
		display: flex;
		flex-direction: column;
		align-items: center;
		align-content: center;
		width: 65rpx;
		height:95rpx;
		padding: 5rpx;
	}
	.pic{
		width: 60rpx;
		height: 80rpx;
	}
</style>
